<template>
	<view class="g-step-item">
		<view class="step-head">
			<view class="step-head-circle"
			 :class="Cpu_circle">
				<slot name="icon"></slot>
			</view>
			<view class="step-head-line" 
			:class="Cpu_line" v-if="isShowline" 
			:style="{'width':Cpu_space+'rpx'}"></view>
		</view>
		<view class="step-des-wrap">
			<view class="step-titel">{{title}}</view>
			<view class="step-description" >{{description}}</view>
			<view>
				<slot name="custorm"></slot>
			</view>
		</view>
	</view>
</template>

<script>
/*
 * prop {string} description 主题
 * prop {string} description 描述 
 * slot {name:dot} 定义描述节点
 */
export default {
	name:'g-empty',
	data() {
		return {
			isActive:0,//1 激活状态 2 未激活 3待激活
			lineStatu:2,//0：不显示 1 激活状态 2 未激活
			isShowline:true,
			cp_parent:null,
		};
	},
	props: {
		title:'',
		description:'',
	},
	computed: {
		Cpu_circle(){
			let active
			if(this.isActive==1){
				//对应的类名
				active='solid'
			}else if(this.isActive==2){
				active='boder'
			}else if(this.isActive = 3){
				active='grey'
			}
			return `step-head-circle-${active}`
			// return "step-head-circle-solid"
			// return "step-head-circle-boder"
			// return "step-head-circle-grey"
		},
		Cpu_line(){
			let status
			if(this.lineStatu==0){
				//对应的类名
				status='hide'
			}else if(this.lineStatu==1){
				status='solid'
			}else if(this.lineStatu = 2){
				status='grey'
			}
			return `step-head-line-${status}`
			// return "step-head-line-grey"
		},
		Cpu_space(){
			//间距
			let space = this.cp_parent.space
			return space
		},
	},
	methods: {
		
	},
	beforeMount() {
		//H5下有效
		this.cp_parent = this.$parent.$parent.$parent
		this.cp_parent.steps.push(this)
	},
	created() {
	}
};
</script>
<style scoped lang="scss">
	@import '../../theme.scss';
	.g-step-item{
		display: inline-block;
		.step-head{
			position: relative;
			display: flex;
			align-items: center;
			&-circle{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #fff;
				transition: 0.15s;
				&-boder{
					//描边状态
					border: 6rpx solid $g-main-primary;
				}
				&-solid{
					background: $g-main-primary;
					border: 6rpx solid $g-main-primary;
					//实心
				}
				&-grey{
					background:$g-main-info;
					border: 6rpx solid $g-main-info;
					//灰色，未激活
				}
			}
			&-line{
				width: 150rpx;
				height: 6rpx;
				&-solid{
					background:$g-main-primary;
				};
				&-grey{
					background:$g-main-info;
				};
				&-hide{
					display: none;
				};
				
			}
		}
	}
	.step-des-wrap{
		.step-titel{
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 8rpx;
			color: $g-text-darker;
		}
		.step-description{
			font-size: 24rpx;
			margin-top: 4rpx;
			color: $g-text-dark;
		}
	}
</style>
